<template>
  <div>
    <div class="flex justify-end">
      <ListExport :columns="columns" class="mb-4" />
    </div>
    <!-- <a-row class="clear-both auto">
      <a-col :span="6">承诺金额：{{  moneyType(totalPrinrepay) }}</a-col>
      <a-col :span="6">放款总额：{{ moneyType(totalDrawDown) }}</a-col>
      <a-col :span="6">贷款限额费：{{  moneyType(totalLimitFee) }}</a-col>
      <a-col :span="6">总贷款限额费还款:{{  moneyType(totalLimitrepay) }}</a-col>
    </a-row>
    <a-row class="clear-both auto">
      <a-col :span="6">利息：{{  moneyType(totalInterepay) }}</a-col>
      <a-col :span="6">出借人手续费：{{  moneyType(totalCommision) }}</a-col>
      <a-col :span="6">其他费用：{{  moneyType(totalotherFee) }}</a-col>
      <a-col :span="6">其他费用还款：{{  moneyType(totalOtherRepay) }}</a-col>
    </a-row>-->
    <a-table rowKey="id" :columns="columns" :data-source="data" :scroll="{ x: 1600 }">
      <span slot="calaDate" slot-scope="calaDate"> {{ humanizeDate(calaDate) }}</span>
      <span slot="beginNum" slot-scope="beginNum"> {{ moneyType(beginNum) }}</span>
      <span slot="endNum" slot-scope="endNum"> {{ moneyType(endNum) }}</span>
      <span slot="commision" slot-scope="commision"> {{ moneyType(commision) }}</span>
      <span slot="limitFee" slot-scope="limitFee"> {{ moneyType(limitFee) }}</span>
      <span slot="otherFee" slot-scope="otherFee"> {{ moneyType(otherFee) }}</span>
      <span slot="interest" slot-scope="interest"> {{ moneyType(interest) }}</span>
      <span slot="dayRate" slot-scope="dayRate"> {{ (100 * dayRate).toFixed(2) }}</span>
      <span slot="drawDown" slot-scope="drawDown"> {{ moneyType(drawDown) }}</span>
      <span slot="limitrepay" slot-scope="limitrepay"> {{ moneyType(limitrepay) }}</span>
      <span slot="interepay" slot-scope="interepay"> {{ moneyType(interepay) }}</span>
      <span slot="prinrepay" slot-scope="prinrepay"> {{ moneyType(prinrepay) }}</span>
      <span slot="otherrepay" slot-scope="otherrepay"> {{ moneyType(otherrepay) }}</span>
      <span slot="balance" slot-scope="balance"> {{ balance ? moneyType(balance) : null }}</span>
    </a-table>
  </div>
</template>
<script>
import { getLoanDetails } from '@/api/common'
import moment from 'moment'
export default {
  name: 'loanDetail',
  data() {
    return {
      totalPrinrepay: 0,
      totalDrawDown: 0,
      totalLimitFee: 0,
      totalLimitrepay: 0,
      totalInterepay: 0,
      totalCommision: 0,
      totalotherFee: 0,
      totalOtherRepay: 0,
      columns: [
        {
          title: '日期',
          dataIndex: 'calaDate',
          key: 'calaDate',
          width: 130,
          fixed: 'left',
          scopedSlots: { customRender: 'calaDate' }
        },
        { title: '期初金额', dataIndex: 'beginNum', key: 'beginNum', scopedSlots: { customRender: 'beginNum' } },
        { title: '期末余额', dataIndex: 'endNum', key: 'endNum', scopedSlots: { customRender: 'endNum' } },
        { title: '出借人手续费', dataIndex: 'commision', key: 'commision', scopedSlots: { customRender: 'commision' } },
        { title: '限额费', dataIndex: 'limitFee', key: 'limitFee', scopedSlots: { customRender: 'limitFee' } },
        { title: '其他费用', dataIndex: 'otherFee', key: 'otherFee', scopedSlots: { customRender: 'otherFee' } },
        { title: '利息', dataIndex: 'interest', key: 'interest', scopedSlots: { customRender: 'interest' } },
        { title: '日利率(%)', dataIndex: 'dayRate', key: 'dayRate', scopedSlots: { customRender: 'dayRate' } },
        { title: '放款金额', dataIndex: 'drawDown', key: 'drawDown', scopedSlots: { customRender: 'drawDown' } },
        {
          title: '限额费还款金额',
          dataIndex: 'limitrepay',
          key: 'limitrepay',
          scopedSlots: { customRender: 'limitrepay' }
        },
        { title: '利息还款金额', dataIndex: 'interepay', key: 'interepay', scopedSlots: { customRender: 'interepay' } },
        { title: '本金还款金额', dataIndex: 'prinrepay', key: 'prinrepay', scopedSlots: { customRender: 'prinrepay' } },
        {
          title: '其他还款金额',
          dataIndex: 'otherrepay',
          key: 'otherrepay',
          scopedSlots: { customRender: 'otherrepay' }
        },
        // {
        //   title: '出借人手续费分摊',
        //   dataIndex: 'otherrepay',
        //   key: 'otherrepay',
        //   scopedSlots: { customRender: 'otherrepay' }
        // },
        {
          title: '结余',
          dataIndex: 'balance',
          key: 'balance',
          scopedSlots: { customRender: 'balance' }
        }
      ],
      data: []
    }
  },
  components: {
    ListExport: () => import('../com/loanDetailExport.vue')
  },
  mounted() {
    this.getData()
  },
  methods: {
    async getData() {
      const _form = {
        projectId: this.$route.query.id
      }
      const res = await getLoanDetails(_form)
      this.data = res.result.data?.list || []
      this.totalPrinrepay = res.result.data.totalPrinrepay
      this.totalDrawDown = res.result.data.totalDrawDown
      this.totalLimitFee = res.result.data.totalLimitFee
      this.totalLimitrepay = res.result.data.totalLimitrepay
      this.totalInterepay = res.result.data.totalInterepay
      this.totalCommision = res.result.data.totalCommision
      this.totalotherFee = res.result.data.totalotherFee
      this.totalOtherRepay = res.result.data.totalOtherRepay
      if (!this.data[0].balance) {
        if (!this.data[0]?.balance) {
          this.columns.forEach((value, index, array) => {
            if (value.title == '结余') {
              // array.splice(value, 1)

              delete array[index] //方法二
            }
          })
        }
      }
      // this.prinrepay = res.result.data.prinrepay
    },
    humanizeDate(v) {
      if (v) {
        return moment(v * 1000).format('YYYY-MM-DD') || '--'
      } else {
        return '-'
      }
    },
    moneyType(v) {
      v = v.toFixed(2)
      return `${v}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
    }
  }
}
</script>
<style lang="css" scoped>
.auto {
  margin-left: 60px;
  margin-bottom: 30px;
}
</style>
